<link rel="stylesheet" type="text/css" href="./css/mergely.css" />
<div class="layuimini-container layuimini-page-anim" style="height: 97%">
  <div class="layuimini-main" style="height: 97%">
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-sm" id="btn-prev">上一个差异</button>
      <button class="layui-btn layui-btn-sm" id="btn-next">下一个差异</button>
      <button class="layui-btn layui-btn-sm" id="btn-line-feed">
        切换换行
      </button>
      <button class="layui-btn layui-btn-sm" id="btn-save">保存文件</button>
    </div>
    <div class="diffs" style="height: 96%; overflow: hidden">
      <div class="compare-wrapper">
        <div id="compare"></div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  $.ajaxSetup({ cache: false });
  var comp = $("#compare");
  function downloadFile(url, callback) {
    $.get(url, function (data) {
      callback(data);
    });
  }
  comp.mergely({
    cmsettings: {
      readOnly: false,
      lineWrapping: true,
      mode: "shell",
      theme: "dracula",
    },
    wrap_lines: true,

    //Doesn't do anything?
    //autoresize: true,

    editor_width: "calc(50% - 25px)",
    editor_height: "100%",

    lhs: function (setValue) {
      downloadFile("./api/config/config", setValue);
    },
    rhs: function (setValue) {
      downloadFile("./api/config/sample", setValue);
    },
  });
  function changeOptions(changer) {
    var options = comp.mergely("options");
    changer(options);

    comp.mergely("options", options);
  }
  $("#btn-save").click(function () {
    var confContent = comp.mergely('get', 'lhs');
    $.post("./api/save",{ content: confContent, name: "config.sh" },
      function (data) {
        layer.msg("保存成功~");
      }
    );
  });
  $("#btn-line-feed").click(function () {
    changeOptions(function (x) {
      x.wrap_lines = !x.wrap_lines;
    });
  });
  $("#btn-prev").click(function () {
    comp.mergely("scrollToDiff", "prev");
  });
  $("#btn-next").click(function () {
    comp.mergely("scrollToDiff", "next");
  });
  layui.use(["layer"], function () {
    var $ = layui.jquery,
      layer = layui.layer;
  });
</script>
